<template>
  <div class="container">
    <!-- 申请发票 -->

    <div style="font-weight: 700;font-size: 15px;margin-bottom: 10px;">
      <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>
      <!-- <span v-if="rowData.invoiceStatus == 5">申请发票</span>
      <span v-else>查看发票</span> -->
      发票信息
    </div>
    <invoiceTemplate style="margin-top: 10px;"></invoiceTemplate>
    <table style="width: 400px;margin-top: 30px;">
      <tbody>
      <tr style="width: 100px;">
        <td>
          <div style="width: 100px;">发票状态</div>
        </td>
        <!-- <td>{{ { 5: '未申请', 10: '待开票', 15: '已开票' }[rowData.invoiceStatus] }}</td> -->
        <td>未申请</td>
      </tr>
      <tr>
        <td>发票内容</td>
        <td>租箱明细</td>
      </tr>
      <tr>
        <td>发票抬头</td>
        <td>
          <div style="word-break: break-all;">{{ param.invoiceTitle }}</div>
        </td>
      </tr>
      <tr>
        <!-- 货代 租箱订单 申请发票页面相关  2024.12.18-->
        <td>联系集装箱公司企业</td>
        <td>{{ tel }}</td>
      </tr>
      <tr>
        <td>在线咨询</td>
        <td><a href="#" style="color: dodger#2158F3;">联系客服</a></td>
      </tr>
    </tbody>
    </table>
    <div style="font-weight: 700;font-size: 15px;margin-top: 30px">发票申请</div>
    <el-form style="margin-top: 10px">
      <el-form-item>
        <div style="width:100px;">
          <redStar />发票类型
        </div>
        <el-radio-group v-model="param.invoiceType">
          <el-radio v-for="item in param.invoiceTypeList" :value="item.value" :key="item.value"
            :label="item.label"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <div>
          <redStar />企业名称
        </div>
        <el-input v-model="param.invoiceTitle" type="textarea" maxlength="200" show-word-limit rows="1"
          style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>
          <redStar />统一社会信用代码
        </div>
        <el-input v-model="param.invoiceTaxNum" type="textarea" maxlength="18" rows="1" style="width: 100%;"
          placeholder="请输入统一社会信用代码"></el-input>
      </el-form-item>
      <div style="font-weight: 700;font-size: 15px;margin-top: 30px">支付租箱费</div>
      <div style="font-weight: 700;font-size: 15px;margin-top: 10px">明细</div>
      <el-table :data="tableList">
        <el-table-column prop="orderNo" label="订单号" width="100"></el-table-column>
        <el-table-column prop="carryCityName" label="提箱城市" width="100"></el-table-column>
        <el-table-column prop="returnCityName" label="还箱城市" width="100"></el-table-column>
        <el-table-column label="下单日期" width="100">
          <template #default="scope">{{ formatDate(scope.row.createTime, 2) }}</template>
        </el-table-column>
        <el-table-column prop="boxQuantity" label="箱量" width="100"></el-table-column>
        <el-table-column prop="unitPrice" label="订单金额" width="100"></el-table-column>
        <el-table-column prop="boxQuantityNeedPay" label="应付箱量" width="100">
          <template #default="scope">
            <el-input-number v-model="scope.row.boxQuantityNeedPay"
              v-if="scope.row.status == 20 || scope.row.status == 25" :controls="false" :min="0" :max="99999"
              :precision="0"></el-input-number>
            <span v-else>{{ scope.row.boxQuantityNeedPay }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="rentBoxFeeNeedPay" label="应付租箱费（￥）" width="150">
          <template #default="scope">{{ numMulti(scope.row.unitPrice, scope.row.boxQuantityNeedPay) }}</template>
        </el-table-column>
      </el-table>
      <div>
        <div style="font-weight: 700;font-size: 15px;margin-top: 10px">合计</div>
        <div>应付箱量总计：{{ boxQuantityNeedPayTotal }} 个</div>
        <div>应付租箱费总计：￥ {{ totalNeedPay }} </div>
        <div>实付租箱费总计：￥
          <el-input-number v-model.trim="param.realPay" :controls="false" :min="0" :max="99999999" :precision="2"
            style="width: 150px;"></el-input-number>
        </div>
      </div>
      <el-form-item>
        <el-button @click="handleApplyInvoice" type="primary" style="margin-top: 40px;text-align: right;">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import invoiceTemplate from '@/views/components/invoiceTemplate.vue'
import redStar from '@/views/components/redStar.vue';
import { formatDate, getInterValDays } from '@/utils'  //html
import { addRentRequestInvoice, addRentRequestInvoiceByStatus } from '@/api/invoice'
import { ElMessage } from 'element-plus';
import { computed, onActivated, onMounted, ref, watch } from 'vue';
import { numAdd, numSub, numMulti } from '@/utils/compute'
const emit = defineEmits(['requestInvoiceSuccess'])

const props = defineProps({
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  },
  statusType: {
    type: Number,
    default: 0
  }
})

const rowData = ref({})
const param = ref({
  realPay: 0,
  invoiceType: 5,
  invoiceTypeList: [
    { value: 5, label: '增值税普通发票' },
    { value: 10, label: '增值税专用发票' },
    // { value: 15, label: '形式发票' },
    // { value: 20, label: '其它' }
  ], //15-形式发票 20-其它
})
//
const currency = computed(() => { return props.tableData.length > 0 && props.tableData[0].currency ? props.tableData[0].currency : ''; })
const tel = computed(() => { return props.tableData.length > 0 && props.tableData[0].tel ? props.tableData[0].tel : '无电话号码'; })
//
const tableList = computed(() => {
  const newVal = props.tableData
  if (!newVal) return
  newVal.map(item => {
    item.boxQuantityNeedPay = item.boxQuantity
  });
  return newVal
})
//
const boxQuantityNeedPayTotal = computed(() => {
  return tableList.value.reduce((pre, cur) => {
    return numAdd(pre, cur.boxQuantityNeedPay)
  }, 0)
})
//
const totalNeedPay = computed(() => {
  return tableList.value.reduce((pre, cur) => {
    const curNeedPay = numMulti(cur.boxQuantityNeedPay, cur.unitPrice)
    return numAdd(pre, curNeedPay).toFixed(2)
  }, 0)
})
// 
watch(() => props.tableData, () => { // 保证执行顺序在 totalNeedPay 之后
  param.value.realPay = totalNeedPay.value
}, { deep: true, immediate: true })

//申请发票
const handleApplyInvoice = () => {
  if (!param.value.invoiceType) {
    return ElMessage({ message: '请选择发票类型', type: 'warning' })
  }
  if (!param.value.invoiceTitle) {
    return ElMessage({ message: '请输入企业名称', type: 'warning' })
  }
  // const regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/; // 匹配数字、英文和汉字
  const regex = /^[a-zA-Z\u4e00-\u9fa5]*$/; // 匹配英文和汉字
  if (!regex.test(param.value.invoiceTitle)) {
    return ElMessage({ message: '企业名称只允许输入英文和汉字', type: 'warning' })
  }
  if (!param.value.invoiceTaxNum) {
    return ElMessage({ message: '请输入统一社会信用代码', type: 'warning' })
  }
  const invoiceTaxNumRegex = /^[0-9a-zA-Z]*$/; // 匹配数字、英文
  if (!invoiceTaxNumRegex.test(param.value.invoiceTaxNum)) {
    return ElMessage({ message: '社会信用代码只允许输入数字、英文', type: 'warning' })
  }
  let invoiceOrder = []
  props.tableData.forEach(item => {
    invoiceOrder.push({ orderId: item.id, orderNo: item.orderNo })
  });
  const data = {
    "invoiceOrder": JSON.stringify(invoiceOrder),
    "invoiceTitle": param.value.invoiceTitle,
    "invoiceType": param.value.invoiceType,
    "invoiceContent": "租箱明细",
    "creditCode": param.value.invoiceTaxNum,
    // "payCurrency": currency
  }
  const statusType = props.statusType
  console.log(statusType)
  addRentRequestInvoice(data).then((res: any) => {
    emit('requestInvoiceSuccess')
  })
  // if ([20, 25, 28].includes(statusType)) { // 20-待还未付|待还未收 25-待还已付|待还已收 28-已还未付|已还未收
  // addRentRequestInvoice(data).then((res: any) => {
  //   emit('requestInvoiceSuccess')
  // })
  //   return
  // }
  // if ([5, 10, 13].includes(statusType)) { // 5-已下单|待开提箱单 10-待提未付|待提未收 13-待提已付|待提已收
  //   addRentRequestInvoiceByStatus(data).then((res: any) => {
  //     emit('requestInvoiceSuccess')
  //   })
  //   return
  // }
  // return ElMessage({ message: '此状态发票申请', type: 'warning' })
}


</script>
